<!-- 库存设置 -->
<template>
  <div class="pageContent">
    <!-- 库存设置头部 -->
    <div class="shopTitle">
      <div class="shopStockOne">库存设置</div>
      <div class="shopStockTwo">
        <el-button @click="getStock">刷新</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="shopStockContent">
      <div class="shopStockData">
        <div class="dataHead">
          <div class="dataHead-left">库存设置</div>
          <div class="dataHead-right">
            <el-form :inline="true" class="demo-form-inline" :model="setMethods">
              <el-form-item>
                <el-button type="danger" @click="batchDelete" :disabled="this.sels.length === 0">批量删除</el-button>
              </el-form-item>
            </el-form>
            <!-- <el-tag effect="plain"> 添加 </el-tag> -->
          </div>
        </div>
        <div class="stockTable">
          <el-table border style="width: 100%" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column prop="skuId" type="selection" width="50" align="center"></el-table-column>
            <el-table-column label="序号" width="70" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
              </template>
            </el-table-column>
            <el-table-column prop="articleNumber" label="商品货号" width="180" align="center">
            </el-table-column>
            <el-table-column prop="prodName" label="商品名称" width="180" align="center">
            </el-table-column>
            <el-table-column prop="kinds" label="商品类型" align="center">
            </el-table-column>
            <el-table-column prop="size" label="尺码" align="center">
            </el-table-column>
            <el-table-column prop="modelId" label="条形码" align="center">
            </el-table-column>
            <el-table-column sortable prop="actualStocks" label="库存" align="center">
            </el-table-column>
            <el-table-column prop="status" label="是否启用" align="center">
              <template v-slot="scope">
                <el-switch :value="scope.row.status == 1" @change="isEnable(scope.row.skuId)" active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="deleteDict(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div style="margin: 30px auto">
      <el-pagination background align="center" :page-size="pageSize" :current-page="currentPage"
        @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
    
<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "shopStockSet",
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      dsq: "", //定时器
      sels: [], //当前选框选中的值
      setMethods: {
        sort: "", //排序方式
        batchAction: "", //批量操作
      },
      value1: true,
    };
  },
  computed: {
    ...mapState("shop", ["refreshStockTime"]),
  },
  mounted() {
    this.getStock();
    this.MyRefreshStockTime();
  },
  beforeDestroy() {
    clearInterval(this.dsq);
  },
  methods: {
    ...mapActions("shop", [
      "getShopStockList",
      "delShopStock",
      "batchDelShopStock",
      "singleUpDownOne"
    ]),
    getStock() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      this.getShopStockList({ currentPage, pageSize }).then((res) => {
        this.tableData = res.data;
        this.total = res.count;
      });
    },
    //定时器
    MyRefreshStockTime() {
      let time = this.refreshStockTime;
      console.log(time * 1000 * 60 * 60);
      this.dsq = setInterval(() => {
        this.getStock();
      }, time * 1000 * 60 * 60);
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getShopStockList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        this.tableData = res.data;
      });
    },
    //单个删除
    deleteDict(row) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let skuId = row.skuId;
          this.delShopStock({ skuId }).then((res) => {
            console.log("r", res);
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getStock();
          });
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    handleSelectionChange(sels) {
      this.sels = [];
      this.sels = sels;
      console.log(
        "9",
        sels.map((item) => item.skuId)
      );
    },
    batchDelete() {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let ids = this.sels.map((item) => item.skuId);
        // let ids=idList.join(',')
        console.log("8", ids);
        this.batchDelShopStock(ids).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getStock();
        });
      });
    },
    //单个是否启用
    isEnable(skuId) {
      // console.log('17',skuId);
      let obj = this.tableData.find(item => {
        return item.skuId == skuId;
      });
      // console.log("obj",obj);
      obj.status = obj.status == 1 ? 2 : 1;
      this.singleUpDownOne(obj).then(res => {
        console.log(res);
      })
    }
  },
};
</script>
    
<style scoped>
html div {
  font-size: 14px;
}

::-webkit-scrollbar {
  display: none;
}

.pageContent {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  /* overflow-y: scroll; */
}

.shopTitle {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f0f0f0;
}

.shopStockOne {
  height: 26px;
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1cb09a;
  padding-left: 10px;
  margin-left: 20px;
}

.shopStockTwo {
  margin-right: 20px;
}

.shopStockTwo button {
  background-color: #1cb09a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}

.shopStockContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shopStockData {
  width: 95%;
  margin-top: 25px;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
}

.dataHead {
  height: 50px;
  background-color: #f0f0f0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dataHead-right {
  display: flex;
  align-items: center;
}

.dataHead-right .el-form-item .el-select {
  height: 34px;
  width: 130px;
}

::v-deep .dataHead-right .el-form-item .el-select .el-input__inner {
  line-height: 34px;
  height: 34px;
}

.dataHead-right .el-form-item {
  margin: 0 15px 0 0;
}
</style>